<template>
	<view class="min100 plr-20 pb-100 bg" :style="{paddingTop:blindBoxheight+'rpx'}">
		<view class="status_bar"></view>
		<view class="topbox flex ">
			<u-icon name="arrow-left" color="#000" size="36" style="position: absolute;left: 0;" @click="backfn"></u-icon>
			<!-- <view class=""  @click="goStuff" style="position: absolute;left: 0;">我的材料</view> -->
			<view class="logo">
				<image src="../../static/home/yaoqingdaohang.png" mode="widthFix"></image>
			</view>
			<view class=""  @click="goStuff" style="position: absolute;right: 0;">合成记录</view>
		</view>
		
		<!-- <view class="flex flex-between">
			<image src="../../static/toplogo.png" class="homeImg mtb-34"></image>
			<view class="white" @click="goStuff">
				我的材料
			</view>
		</view> -->
		<!-- 藏品列表 -->
		<empty v-if="list.length==0"></empty>
		<view class="" v-else v-for="(item,index) in list" :key="index" @click="goDetails(item)">
			<view class="collectItem bg radius-20 mb-30 size-22 flex">
				<view class="start">
					<view v-if="item.status==1" class="flex conducted plr-10">
						<image src="../../static/my/hot.png" mode="widthFix" style="width: 40rpx;margin-right: 4rpx;"></image>
						<view class="">活动进行中</view>
					</view>
					<view v-if="item.status==2" class="plr-10 end">已结束</view>
					<view v-if="item.status==3" class="plr-10">敬请期待</view>
					<view v-if="item.status==4" class="plr-10 conducted">
						<u-count-down :timestamp="item.time"></u-count-down>
					</view>
				</view>
				<image class="collectImg radius-40" :src="item.image" mode="heightFix"></image>
				<view class="plr-30 ptb-30 itemCont">
					<view class="size-34">
						{{item.name}}
					</view>
					<!-- <view class="flex mt-20">
						<view class="flex">
							<view class="">{{item.author}}</view>
							<view class="creator ml-30 plr-5 ptb-5">
								创作者
							</view>
						</view>
					</view> -->
					<view class="activityTime mtb-20">
						活动时间{{item.start_time}}-{{item.end_time}}
					</view>
					<view class="participateBtn " @click="goDetails(item)">
						<view class="openBtn ptb-10 plr-30" v-if="item.status==1">立即参与</view>
						<view class="comingBtn ptb-10 plr-30" v-if="item.status==2">已结束</view>
						<view class="comingBtn ptb-10 plr-30" v-if="item.status==3">敬请期待</view>
						<view class="comingBtn ptb-10 plr-30" v-if="item.status==4">即将开启</view>
						
						<!-- <view class="">已结束</view> -->
					</view>
				</view>
			</view>
		</view>
		<tab></tab>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	import tab from "../../components/tab.vue"
	export default {
		components: {
			empty,tab
		},
		data() {
			return {
				flag: false, //上拉加载
				page: 1,
				pagesize: 10,
				status: 'more',
				list: [],
				blindBoxheight: '',
				timestamp: 40532,
			}
		},
		onLoad() {
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					// console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.page = 1;
			this.list = [];
			this.init();
		},
		onHide() {
			this.list=[];
			this.page = 1;
			this.flag = false;
			this.status = 'more';
		},
		methods: {
			backfn() {
				uni.navigateBack({})
			},
			goStuff() {
				// uni.navigateTo({
				// 	url: "./stuff"
				// })
				uni.navigateTo({
					url: './syntheticRecord'
				})
			},
			init() {
				this.$http('api/forge_bin_fen/forgeList', {
					page: this.page,
					pagesize: 10
				}).then(res => {
					uni.stopPullDownRefresh();
					let data = res.data;
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore'
					} else {
						this.list = this.list.concat(data);
						for(let i=0;i<this.list.length;i++){
							this.list[i].start_time=this.list[i].start_time.slice(5)
							this.list[i].end_time=this.list[i].end_time.slice(5)
						}
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore'
						}
					}
				})
			},
			goDetails(item) {
				console.log('44')
				// if(item.status==1){
				// 	uni.navigateTo({
				// 		url: './chipDetails?id=' + item.id
				// 	})
				// }
				uni.navigateTo({
					url: './forgeDetails?id=' + item.id
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	page{
		// background-color: #000;
	}
	.end{
		background: linear-gradient(to right, rgba(#65DFE5,0.4), rgba(#DC75ED,0.4));
		color: #fff;
		padding: 0 20rpx;
	}
	.conducted{
		background: linear-gradient(to right, #65DFE5, #DC75ED);
		color: #fff;
		::v-deep  .u-countdown-colon{
			color: #fff !important;
		}
		::v-deep  .u-countdown-item{
			background-color: transparent !important;
			
		}
		::v-deep  .u-countdown-time{
			color: #fff !important;
			font-size: 20rpx !important;
		}
	}
	.creator{
		border-radius: 12rpx;
		background: linear-gradient(to right, #65DFE5, #DC75ED);
	}
	.participateBtn{
		float: right;
		border-radius: 40rpx;
		color: #fff;
		overflow: hidden;
		.comingBtn{
			background: linear-gradient(to right, rgba(#65DFE5,0.4), rgba(#DC75ED,0.4));
		}
		.openBtn{
			background: linear-gradient(to right, #65DFE5, #DC75ED);
		}
	}
	.activityTime{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.collectItem{
		border: 1rpx solid #f5f5;
		box-shadow: #f5f5f5 0rpx 8rpx 20rpx 5rpx;
		// border: 1rpx solid #fff;
		height: 200rpx;
		position: relative;
		// line-height: 200rpx;
		.start{
			position: absolute;
			right: 0;
			top: 0;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 0 20rpx 0 30rpx;
			overflow: hidden;
		}
		.itemCont{
			// background: url(../../static/home/ru1.png) no-repeat center 0rpx;
			// background-position: center 0px;
			// background-size: cover;
		}
	}
	.topbox{
		width: 100%;
		text-align: center;
		position: relative;
		.logo{
			width: 100%;
			image{
				width: 180rpx;
			}
		}
	}
	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}


	.collectImg {
		height: 180rpx;
		margin-left: 20rpx;
		// height: 690rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}
</style>
